<template>
	<div class="home-container">
		<!-- 顶部横幅 -->
		<div class="banner-section">
			<div class="banner-content">
				<h1 class="animate__animated animate__fadeInDown">欢迎使用ERP管理系统</h1>
				<p class="animate__animated animate__fadeInUp animate__delay-1s">一站式企业运营管理解决方案</p>
			</div>
			<div class="banner-decoration">
				<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="banner-shape">
					<path fill="rgba(255, 255, 255, 0.1)" d="M48.8,-64.1C63.5,-55.4,75.5,-41.8,81.3,-25.9C87.1,-9.9,86.7,8.5,81.2,25.2C75.7,41.8,65,56.7,50.4,65.5C35.8,74.2,17.9,76.7,0.2,76.4C-17.5,76.2,-35,73.2,-48.9,64.1C-62.8,55,-73.1,39.8,-77.8,23.1C-82.5,6.4,-81.6,-11.8,-74.9,-27.5C-68.2,-43.2,-55.7,-56.4,-41.4,-65.1C-27,-73.8,-13.5,-78,1.8,-80.4C17.2,-82.8,34.1,-72.8,48.8,-64.1Z" transform="translate(100 100)" />
				</svg>
			</div>
		</div>

		<!-- 核心功能模块 -->
		<div class="section-title">
			<h2>核心功能</h2>
			<div class="title-bar"></div>
		</div>
		<el-row :gutter="30" class="feature-section">
			<el-col :span="8" v-for="(feature, index) in features" :key="index">
				<div class="feature-card animate__animated animate__fadeInUp" :style="{ animationDelay: index * 0.2 + 's' }">
					<div class="feature-image" :style="{ backgroundColor: feature.bgColor }">
						<component :is="feature.svg" />
					</div>
					<h3>{{ feature.title }}</h3>
					<p>{{ feature.description }}</p>
				</div>
			</el-col>
		</el-row>

		<!-- 系统优势 -->
		<div class="section-title">
			<h2>系统优势</h2>
			<div class="title-bar"></div>
		</div>
		<div class="advantages-section">
			<el-row :gutter="30">
				<el-col :span="6" v-for="(advantage, index) in advantages" :key="index">
					<div class="advantage-card animate__animated animate__fadeInUp" :style="{ animationDelay: index * 0.2 + 's' }">
						<div class="advantage-image" :style="{ backgroundColor: advantage.bgColor }">
							<component :is="advantage.svg" />
						</div>
						<h4>{{ advantage.title }}</h4>
						<p>{{ advantage.description }}</p>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

// SVG组件定义
const ProductionSvg = {
	template: `
		<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#E3F2FD"/>
			<path d="M32 22H16V26H32V22Z" fill="#1976D2"/>
			<path d="M24 16V32" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>
			<path d="M28 20V28" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>
			<path d="M20 20V28" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const SalesSvg = {
	template: `
		<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#E8F5E9"/>
			<path d="M32 20L24 28L16 20" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M24 16V28" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"/>
			<path d="M16 28H32" stroke="#4CAF50" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const FinanceSvg = {
	template: `
		<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#FFF3E0"/>
			<path d="M24 16V32" stroke="#FF9800" stroke-width="2" stroke-linecap="round"/>
			<path d="M28 20H22C20.8954 20 20 20.8954 20 22C20 23.1046 20.8954 24 22 24H26C27.1046 24 28 24.8954 28 26C28 27.1046 27.1046 28 26 28H20" stroke="#FF9800" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const DataDrivenSvg = {
	template: `
		<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#E3F2FD"/>
			<path d="M16 32V24" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>
			<path d="M24 32V16" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>
			<path d="M32 32V20" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

const MobileSvg = {
	template: `
		<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#E8F5E9"/>
			<rect x="18" y="12" width="12" height="24" rx="2" stroke="#4CAF50" stroke-width="2"/>
			<line x1="18" y1="16" x2="30" y2="16" stroke="#4CAF50" stroke-width="2"/>
			<line x1="18" y1="32" x2="30" y2="32" stroke="#4CAF50" stroke-width="2"/>
		</svg>
	`
};

const CollaborationSvg = {
	template: `
		<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#FFF3E0"/>
			<circle cx="24" cy="20" r="4" stroke="#FF9800" stroke-width="2"/>
			<circle cx="16" cy="28" r="3" stroke="#FF9800" stroke-width="2"/>
			<circle cx="32" cy="28" r="3" stroke="#FF9800" stroke-width="2"/>
			<path d="M20 24L17 25" stroke="#FF9800" stroke-width="2"/>
			<path d="M28 24L31 25" stroke="#FF9800" stroke-width="2"/>
		</svg>
	`
};

const AnalysisSvg = {
	template: `
		<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#FFEBEE"/>
			<path d="M16 32L24 16L32 32H16Z" stroke="#F44336" stroke-width="2" stroke-linejoin="round"/>
			<path d="M24 26V28" stroke="#F44336" stroke-width="2" stroke-linecap="round"/>
		</svg>
	`
};

export default defineComponent({
	name: 'home',
	components: {
		ProductionSvg,
		SalesSvg,
		FinanceSvg,
		DataDrivenSvg,
		MobileSvg,
		CollaborationSvg,
		AnalysisSvg
	},
	setup() {
		const state = reactive({
			features: [
				{
					svg: 'ProductionSvg',
					bgColor: '#E3F2FD',
					title: '生产管理',
					description: '高效的生产计划管理，实时监控生产进度'
				},
				{
					svg: 'SalesSvg',
					bgColor: '#E8F5E9',
					title: '销售管理',
					description: '全方位的销售策略规划与执行跟踪'
				},
				{
					svg: 'FinanceSvg',
					bgColor: '#FFF3E0',
					title: '财务管理',
					description: '精准的财务数据分析与预算管理'
				}
			],
			advantages: [
				{
					svg: 'DataDrivenSvg',
					bgColor: '#E3F2FD',
					title: '数据驱动',
					description: '基于数据分析的决策支持'
				},
				{
					svg: 'MobileSvg',
					bgColor: '#E8F5E9',
					title: '移动办公',
					description: '随时随地处理业务'
				},
				{
					svg: 'CollaborationSvg',
					bgColor: '#FFF3E0',
					title: '协同办公',
					description: '打破部门壁垒，提升效率'
				},
				{
					svg: 'AnalysisSvg',
					bgColor: '#FFEBEE',
					title: '智能分析',
					description: '智能化的数据分析与预测'
				}
			]
		});

		return {
			...state
		};
	}
});
</script>

<style scoped lang="scss">
.home-container {
	padding: 40px;
	background-color: #f8fafc;
	min-height: 100vh;

	.section-title {
		text-align: center;
		margin-bottom: 40px;
		position: relative;

		h2 {
			font-size: 32px;
			font-weight: 600;
			color: #1a1a1a;
			margin-bottom: 16px;
		}

		.title-bar {
			width: 60px;
			height: 4px;
			background: linear-gradient(90deg, #409EFF, #67C23A);
			margin: 0 auto;
			border-radius: 2px;
		}
	}

	.banner-section {
		height: 400px;
		background: linear-gradient(135deg, #1a237e 0%, #0277bd 100%);
		border-radius: 16px;
		margin-bottom: 60px;
		position: relative;
		overflow: hidden;
		box-shadow: 0 20px 40px rgba(0,0,0,0.1);

		.banner-content {
			position: relative;
			z-index: 2;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: white;
			text-align: center;
			padding: 0 20px;

			h1 {
				font-size: 48px;
				font-weight: 700;
				margin-bottom: 24px;
				letter-spacing: 1px;
				text-shadow: 0 2px 4px rgba(0,0,0,0.2);
			}

			p {
				font-size: 20px;
				opacity: 0.9;
				max-width: 600px;
				line-height: 1.6;
				text-shadow: 0 1px 2px rgba(0,0,0,0.1);
			}
		}

		.banner-decoration {
			position: absolute;
			right: -100px;
			top: -100px;
			width: 600px;
			height: 600px;
			z-index: 1;
			opacity: 0.1;
			animation: rotate 60s linear infinite;

			.banner-shape {
				width: 100%;
				height: 100%;
			}
		}
	}

	.feature-section {
		margin-bottom: 60px;

		.feature-card {
			background: white;
			padding: 40px;
			border-radius: 16px;
			text-align: center;
			transition: all 0.3s ease;
			box-shadow: 0 4px 6px rgba(0,0,0,0.02);
			height: 100%;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 20px 40px rgba(0,0,0,0.08);

				.feature-image {
					transform: scale(1.05);
				}
			}

			.feature-image {
				width: 120px;
				height: 120px;
				margin: 0 auto 24px;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				padding: 24px;

				svg {
					width: 100%;
					height: 100%;
				}
			}

			h3 {
				font-size: 24px;
				font-weight: 600;
				margin-bottom: 16px;
				color: #1a1a1a;
			}

			p {
				color: #666;
				line-height: 1.8;
				font-size: 16px;
			}
		}
	}

	.advantages-section {
		.advantage-card {
			background: white;
			padding: 30px;
			border-radius: 16px;
			text-align: center;
			height: 100%;
			transition: all 0.3s ease;
			box-shadow: 0 4px 6px rgba(0,0,0,0.02);

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 20px 40px rgba(0,0,0,0.08);

				.advantage-image {
					transform: scale(1.05);
				}
			}

			.advantage-image {
				width: 80px;
				height: 80px;
				margin: 0 auto 20px;
				border-radius: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				padding: 16px;

				svg {
					width: 100%;
					height: 100%;
				}
			}

			h4 {
				font-size: 20px;
				font-weight: 600;
				margin-bottom: 12px;
				color: #1a1a1a;
			}

			p {
				color: #666;
				font-size: 14px;
				line-height: 1.8;
			}
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
